<template>
	<div>
		<el-row :gutter="24">
			<el-col :span="24" style="padding: 0px;">
				<el-col :span="6" style="padding-right: 5px!important;padding-left: 15px!important">
					<el-input size="small" v-model="treeFilterValue" placeholder="请输入内容" icon="search" @click="searchTree"></el-input>
				</el-col>
				<el-col :span="8" style="font-size:20px">
					当前分类：{{this.$data.curentPName}}
				</el-col>
				<el-col :span="10" style="text-align: right">
					<el-button type="primary" size="small" v-on:click='add'>新增</el-button>
					<el-button type="primary" size="small" v-on:click='edit'>编辑</el-button>
					<el-button type="primary" size="small" v-on:click='start'>启用</el-button>
					<el-button type="primary" size="small" v-on:click='stop'>停用</el-button>
				</el-col>
			</el-col>
		</el-row>
		<el-row :gutter="24">
			<!-- 参数树 -->
			<el-col :span="6" style="padding-right: 5px!important;padding-left: 15px!important">
				<el-tree :data="paramTreeData" :filter-node-method="filterNode" :highlight-current=true :props="defaultProps" accordion @node-click="handleNodeClick" :auto-expand-parent=false ref="paramTree" node-key="id"></el-tree>
			</el-col>
			<el-col :span="18" style="padding-right: 0px!important;padding-left: 0px!important;">
				<el-table border stripe :data="params.dataList" style="width: 100%" @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="60" fixed>
					</el-table-column>
					<el-table-column prop="code" label="编码" width="100">
					</el-table-column>
					<el-table-column prop="name" label="名称" width="200">
					</el-table-column>
					<el-table-column prop="type" label="类型" :formatter="typeCov" width="120">
					</el-table-column>
					<el-table-column prop="valueType" label="值类型" :formatter="valueCov" width="120">
					</el-table-column>
					<el-table-column prop="defValue" label="默认值" width="120">
					</el-table-column>
					<el-table-column prop="status" label="状态" :formatter="statusCov" width="80">
					</el-table-column>
					<!--<el-table-column label="操作" width="160" fixed="right">
						<template scope="scope">
							<el-tooltip class="item" effect="light" content="编辑" placement="top">
								<el-button type="primary" size="mini" class="iconfont icon-dingdan" @click.native.prevent="edit(scope.$index)"></el-button>
							</el-tooltip>
							<el-tooltip class="item" effect="light" content="启用" placement="top">
								<el-button type="info" size="mini" class="iconfont icon-kaishi" @click.native.prevent="start(scope.$index)"></el-button>
							</el-tooltip>
							<el-tooltip class="item" effect="light" content="停用" placement="top">
								<el-button type="warning" size="mini" class="iconfont icon-stop" @click.native.prevent="stop(scope.$index)"></el-button>
							</el-tooltip>
						</template>
					</el-table-column>-->
				</el-table>
				<el-pagination small @current-change="handleCurrentChange" :current-page="curPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="params.total">
				</el-pagination>
			</el-col>
		</el-row>
		<el-dialog title="参数类型定义" v-model=" paraFormShow">
			<el-form :model=" paramFormData" ref="paramForm" :rules="paramRule" label-width="100px">
				<el-form-item label="编码" prop="code" required>
					<el-input size="small" v-model="paramFormData.code"></el-input>
				</el-form-item>
				<el-form-item label="名称" prop="name" required>
					<el-input size="small" v-model="paramFormData.name"></el-input>
				</el-form-item>
				<el-form-item label="类型" required prop="type">
					<el-select size="small" v-model="paramFormData.type" placeholder="请选择" readonly>
						<el-option v-for="item in typeCombo" :label="item.label" :value="item.value"></el-option>
					</el-select>
				</el-form-item>
				<template v-if="paramFormData.type == '1' ">
					<el-form-item label="值类型" required prop="valueType">
						<el-select size="small" v-model="paramFormData.valueType" placeholder="请选择" readonly>
							<el-option v-for="item in valueTypeCombo" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="默认值" prop="defValue" required>
						<el-input size="small" v-model="paramFormData.defValue"></el-input>
					</el-form-item>
				</template>
				<el-form-item label="显示顺序" prop="dispOrder">
					<el-input-number size="small" v-model="paramFormData.dispOrder" :min="0" :max="999"></el-input-number>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="paraFormShow = false">取 消</el-button>
				<el-button type="primary" @click="saveParam">提 交</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	export default {
		data: function() {
			return {
				//分页设置
				page: this.page,
				//当前分组页
				curPage: 1,
				params: {
					dataList: [],
					total: 0
				},

				//树过滤条件
				treeFilterValue: '',

				//树型数据配置
				defaultProps: {
					children: 'child',
					label: 'name'
				},

				//树型数据
				paramTreeData: [],
				//默认选中的上级节点
				curentPCode: "-1",
				curentPName: "",

				//子菜单表格数据
				paramTabelData: [],
				//子系统下级
				sysChild: [],
				//模块下级
				moduleChild: [],
				//功能下级
				funcChild: [],
				//资源类型下拉数据
				resTypeComboData: [],
				//资源表单是否显示
				paraFormShow: false,
				//资源 Form 数据
				paramFormData: {
					id: '',
					code: '',
					name: '',
					type: '',
					valueType: '',
					defValue: '',
					pCode: '',
					status: '1',
					dispOrder: 0,
					updateTime: 0,
					updateUser: '',
					createTime: 0,
					createUser: ''

				},
				//资源 Form 空数据
				paramEmptyData: {
					id: '',
					code: '',
					name: '',
					type: '',
					valueType: '',
					defValue: '',
					pCode: '',
					status: '1',
					dispOrder: 0,
					updateTime: 0,
					updateUser: '',
					createTime: 0,
					createUser: ''
				},

				//类型下拉数据
				typeCombo: [{
					label: '分组',
					value: '0'
				}, {
					label: '参数',
					value: '1'
				}],

				//类型下拉数据
				valueTypeCombo: [{
					label: '数字',
					value: '0'
				}, {
					label: '字符',
					value: '1'
				}],
				//资源类型转换
				resTypeData: {},
				//当前树型节点 ID
				curTreeResId: '',
				curTreeResType: '',
				//表单较验规则
				paramRule: {
					code: [{
						required: true,
						message: '请填写编码',
						trigger: 'blur'
					}],
					name: [{
						required: true,
						message: '请填写名称',
						trigger: 'blur'
					}],
					type: [{
						required: true,
						message: '请选择类型',
						trigger: 'blur'
					}],
					valueType: [{
						required: true,
						message: '请选择值类型',
						trigger: 'blur'
					}],
					defValue: [{
						required: true,
						message: '请填写默认值',
						trigger: 'blur'
					}],
				},
				//选中的列
				multipleSelection: []
			}
		},
		methods: {
			//复选框回调函数
			handleSelectionChange: function(val) {
				debugger;
				this.$data.multipleSelection = val;
			},
			//分页查询
			handleCurrentChange: function() {

			},
			//查询树节点
			searchTree: function() {
				if(this.$data.treeFilterValue == "") {
					this.$message("请输入查询条件");
					this.queryParamTree();
					return;
				}
				this.$refs.paramTree.filter(this.$data.treeFilterValue);
			},
			//点击资源树节点
			handleNodeClick(data) {
				this.$data.curentPCode = data.code;
				this.$data.curentPName = data.name;
				this.queryParamGrid();
			},
			//查询资源列表
			queryParamGrid: function() {
				this.$http.get(this.API_ROOT + '/base/param/def/page', {
					params: {
						pCode: this.$data.curentPCode,
						start: this.$data.curPage,
						limit: this.$data.page.pageSize
					}
				}).then((response) => {
					this.$data.params.total = Number(response.data.total);
					this.$data.params.dataList = response.data.dataList; //Object.assign(this.$data. paramTabelData, response.data.dataList);
				}, (response) => {});
			},

			//启用资源
			start: function(index) {

				if(this.$data.multipleSelection.length == 1) {
					var data = this.$data.multipleSelection[0];
				this.$http({
					method: 'POST',
					url: this.API_ROOT + '/base/param/def/start',
					params: {
						id: data.id,
					}
				}).then(function(resp) {
					this.$message(resp.data.msg);
					this.queryParamGrid();
				}, function(error) {
					// error
				})
				} else {
					this.$message.error("请选择一条数据")
				}

			},
			//停用资源
			stop: function(index) {

				if(this.$data.multipleSelection.length == 1) {
					var data = this.$data.multipleSelection[0];
				this.$http({
					method: 'POST',
					url: this.API_ROOT + '/base/param/def/stop',
					params: {
						id: data.id,
					}
				}).then(function(resp) {
					this.$message(resp.data.msg);
					this.queryParamGrid();
				}, function(error) {
					// error
				})
				} else {
					this.$message.error("请选择一条数据")
				}
				
			},

			//新增
			add: function() {
				this.$data.paramFormData = Object.assign(this.$data.paramFormData, this.$data.paramEmptyData)
				this.$data.paramFormData.pCode = this.$data.curentPCode;
				this.$data.paraFormShow = true;
			},
			//编辑
			edit: function(index) {

				if(this.$data.multipleSelection.length == 1) {
					var data = this.$data.multipleSelection[0];
					this.$http.get(this.API_ROOT + '/base/param/def/info', {
						params: {
							id: data.id,
						}
					}).then(function(resp) {
						this.$data.paramFormData = Object.assign(this.$data.paramFormData, resp.data.data);
						this.$data.paraFormShow = true;
					}, function(error) {})
				} else {
					this.$message.error("请选择一条数据")
				}

			},
			//保存参数
			saveParam: function(index) {
				this.$refs.paramForm.validate(function(valid) {
					if(valid) {
						this.$http.post(this.API_ROOT + '/base/param/def/save', this.$data.paramFormData)
							.then(resp => {
								if(resp.data.success) {
									this.$message(resp.data.msg);
									this.queryParamTree();
									this.queryParamGrid();
									this.$data.paraFormShow = false;
								} else {
									this.$message.error(resp.data.msg);
								}
							}, resp => {

							});
					}
					return false;
				}.bind(this));
			},
			//状态转换
			statusCov: function(row, column) {
				return row.status == 1 || row.status == "1" ? "已启用" : "已停用";
			},
			//资源类型转换
			typeCov: function(row, column) {
				return row.type == "0" || row.type == 0 ? "分组" : "参数";
			},

			//资源类型转换
			valueCov: function(row, column) {
				if(row.valueType == null || row.valueType == "") {
					return "";
				}
				return(row.valueType == "0" || row.valueType == 0) ? "数字" : "字符";
			},

			//资源过滤
			filterNode: function(value, data, node) {
				if(!value) return true;
				return data.name.indexOf(value) !== -1;
			},
			//查询参数树
			queryParamTree: function() {
				//获取资源树
				this.$http.get(this.API_ROOT + '/base/param/def/tree', {}).then((response) => {
					this.$data.paramTreeData = response.data.dataList;
				}, (response) => {});
			}
		},
		//组件创建时
		created: function() {
			//查询参数树
			this.queryParamTree();
		}

	};
</script>
<style>
	
</style>